<#cenluan title="${activity.title}" menu="activity" validate="true">
    <div class="rowm offcanvas-row offcanvas-row-right" id="offcanvas">
        <div class="col-sm-8">
            <p class="pull-right visible-xs">
                <a href="#offcanvas" data-toggle="offcanvas">&gt;&gt;</a>
            </p>

            <h3>${activity.title,xss}</h3>

            <p class="text-muted small hidden-xs">
                ${activity.creater.html}于${activity.createTime,prettyTime}
                （${activity.createTime,"yyyy-MM-dd HH:mm"}）发起活动&nbsp;&nbsp;
                <!--@if(editable){-->
                <a href="/activity/edit/${activity.id}">编辑</a>&nbsp;&nbsp;
                <!--@}-->
                <!--@if(deletable){-->
                <a href="javascript:;" class="btn-activity-del">删除</a>
                <!--@}-->
            </p>

            <p class="text-muted small visible-xs">
                ${activity.createTime,"yyyy-MM-dd"}&nbsp;&nbsp;${activity.creater.html}
            </p>
            <hr class="mt0">
            <p class="text-success">
                活动时间：${activity.start,"yyyy-MM-dd HH:mm"}&nbsp;至&nbsp;${activity.end,"yyyy-MM-dd HH:mm"}</p>

            <div class="blog-content">${activity.htmlContent}</div>
            <!-- 手机选项 -->
            <div class="btn-group btn-group-sm visible-xs clearfix mb20">
                <!--@if(deletable){-->
                <button class="btn btn-default btn-activity-del">
                    <span class="glyphicon glyphicon-trash"></span>&nbsp;删除活动
                </button>
                <!--@}-->
                <!--@if(editable){-->
                <a class="btn btn-default" href="/activity/edit/${activity.id}">
                    <span class="glyphicon glyphicon-edit"></span>&nbsp;编辑内容
                </a>
                <!--@}-->
            </div>
            <!-- 评论 -->
            <h4 class="page-header">网友评论${activity.commentCount}条</h4>
            <!--@for(comment in page.list){-->
            <div class="media activity-comment" id="${comment.id}">
                <a class="media-left" href="/user/show/${comment.createrId}">
                    <img src="${comment.creater.avatarUrl}" class="avatar-md img-rounded">
                </a>

                <div class="media-body">
                    <p class="text-muted small">
                        ${comment.creater.html}发表于${comment.createTime,prettyTime}
                        <!--@if(comment.deletable){-->
                        &nbsp;&nbsp;<a href="javascript:;" class="btn-comment-del" data-id="${comment.id}">删除</a>
                        <!--@}-->
                    </p>

                    <p>${comment.content}</p>
                </div>
            </div>
            <!--@if(!commentLP.last){-->
            <hr class="dashed">
            <!--@}-->
            <!--@}-->
            <div id="comment-divider"></div>
            ${pageLink}
            <!-- 评论表单 -->
            <form class="form-horizontal mt20" method="post" id="commentForm">
                <input type="hidden" name="activityComment.activityId" value="${activity.id}">

                <div class="form-group">
                    <div class="col-xs-12">
						<textarea class="form-control" name="activityComment.content" style="resize:vertical"
                                  placeholder="评论字数在200以内" required maxlength="200" rows="4"></textarea>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-xs-4">
                        <button class="btn btn-primary btn-block" type="submit">提交</button>
                    </div>
                    <div class="col-xs-8">
                        <label class="checkbox-inline">
                            <input type="checkbox" checked="checked" name="showLog">
                            同时在我的动态里显示
                        </label>
                    </div>
                </div>
            </form>

        </div>
        <!-- col-sm-8 -->
        <div class="col-sm-4 offcanvas-sidebar" id="div-activity-member">

        </div>
        <!-- col-sm-4 -->
    </div>
    <script>
        $(function () {
            $(".btn-activity-del").click(function () {
                if (!confirm("确定要将活动删除吗？")) {
                    return;
                }
                $.getJSON("/activity/delete/${activity.id}", function (json) {
                    if (!json.ok) {
                        alert(json.msg);
                    } else {
                        location = "/activity";
                    }
                });
            });
            $("#commentForm").validate({
                submitHandler: function (form) {
                    $(form).find(":submit").button("loading");
                    $(form).ajaxSubmit({
                        url: "/activity/comment/save",
                        success: function (json) {
                            if (!json.ok) {
                                alert(json.msg);
                            } else {
                                $(form).resetForm();
                                $.get("/activity/comment/show/" + json.id, function (data) {
                                    if ($(".activity-comment").length) {
                                        $("#comment-divider").before("<hr class='dashed'>");
                                    }
                                    $("#comment-divider").before(data);
                                }, "html");
                            }
                            $(form).find(":submit").button("reset");
                        }
                    });
                }
            });
            $(".container").on("click", ".btn-comment-del", function (e) {
                if (!confirm("确定要将这条评论删除吗？")) {
                    return;
                }
                var id = $(this).data("id");
                $.getJSON("/activity/comment/delete/" + id,
                        function (json) {
                            if (!json.ok) {
                                alert(json.msg);
                                return;
                            }
                            var comment = $("#" + id);
                            if (comment.next("hr").length) {
                                comment.next("hr").remove();
                            } else {
                                comment.prev("hr").remove();
                            }
                            comment.remove();
                            if (!$(".activity-comment").length) {
                                location = "/activity/show/${activity.id}";
                            }
                        });
            });
            //加载成员
            loadMemberData();
        });
        function loadMemberData() {
            $("#div-activity-member").text("加载中...").load("/activity/member/${activity.id}");
        }
    </script>
</#cenluan>